<template>
  <div class="product-container">
    <div class="my-header">
      <i class="back"></i>
      <strong>商品列表</strong>
      <i></i>
    </div>
    <!-- 商品列表 -->
    <div class="content">
      <div class="loadmore-warp" id="loadmore">
        <div class="tips" v-if="activity.notice!==''">
          <div class="icon"></div>
          <div style="padding-left:30px;line-height:20px;" v-html="activity.notice"></div>
        </div>
        <div class="recommend" v-if="params.bid==testBid&&activity.activityId==preSaleId">
          <div v-for="(item,index) in recommend" :key="index" :class="{'two-item':item.class==1}">
            <img @click="recommendRouter(item.goodId)" v-lazy="'http://img.sportjx.com/img/activity/recommend_'+item.id+'.png'" alt="">
          </div>
          <div>
          </div>
        </div>
        <mt-loadmore :bottom-distance="30" @bottom-status-change="handleBottomChange" :top-method="loadTop" :bottom-method="loadBottom"
          :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore">
          <ul class="product-list">
            <li v-if="activity.bannerImg1" style="margin-right:-10px"><img style="width:100%;" v-lazy="activity.bannerImg1" alt=""></li>
            <li :class="{'product-item':!item.banner}" v-for="(item,index) in proData" :key="index">
              <div v-if="item.banner" style="margin-right:-10px;padding:20px 0"><img style="width:100%;" v-lazy="activity.bannerImg2" alt=""></div>
              <div v-else @click="goDetail( item.productId )">
                <div class="item-posre">
                  <img v-lazy="item.activityImg" alt="">
                </div>
                <div class="item-product-text">{{item.sellingPoints}}</div>
                <p class="original-price">吊牌价：&yen;<i>{{item.goodsPrice|formatMoney}}</i></p>
                <p class="item-product-info"> <span><i>&yen;</i>{{item.sharePrice|formatMoney}}</span>
                  <button type="button" class="jx-btn" v-if="activity.activityId!=preSaleId&&item.stockNum>0">立即购买</button>
                  <button type="button" class="jx-btn none" v-else-if="activity.activityId!=preSaleId">已售罄 </button>
                </p>
              </div>
              <!--<div class="size">尺码：{{item.sizeName}}</div>-->
              <!--<div class="size">尺码：{{item.sizeName}}</div>-->
            </li>
          </ul>
          <div class="loadmoreText" slot="bottom" v-show="proData!=''">
            <span v-if="bottomStatus !== 'drop'">{{bottomText}}</span>
            <span v-else>释放更新</span>
          </div>
          <div class="empty-info cart-tips" v-if="proData == '' && isDone">
            <p>活动已经下架了哦</p>
          </div>
        </mt-loadmore>
      </div>
    </div>
    <ServiceIcon></ServiceIcon>
    <!-- 商品列表 -->
    <mt-tabbar v-model="selected" :fixed="true">
      <mt-tab-item id="shop">
        <div @click="$router.go(0)">
          <div class="iconfont icon-dianpu"></div><span>商品</span>
        </div>
      </mt-tab-item>
      <mt-tab-item id="cart">
        <div @click="$router.push('/cart')">
          <div class="iconfont icon-cart"></div><span>购物车</span>
        </div>
      </mt-tab-item>
      <mt-tab-item id="home">
        <div @click="$router.push({name:'order',query:{tab:0}})">
          <div class="iconfont icon-dingdan"></div><span>订单</span>
        </div>
      </mt-tab-item>
    </mt-tabbar>
    <BackHead></BackHead>
  </div>
</template>

<script>
  import ServiceIcon from '@/components/common/serviceIcon'
  import BackHead from '@/components/common/backHead'
  import wxShare from '@/mixins/wechat'
  import {
    getProductList
  } from '@/api/shop'

  import {
    decryptString,
    setLocalStorage,
    encryptString,
    getLocalStorage
  } from '@/utils'
  export default {
    data() {
      return {
        /* 对我可见的id */
        testBid: 'c5677c2269004e1eb80d43844b59a5ad',
        /* 活动id*/
        preSaleId: '95c2d75eba414c39887af21f208de611',
        // testBid: 'ed2044756e4d4306a1587c4bf9a36a2e',
        // /* 活动id*/
        // preSaleId: 'bdc1444a11ec44e3babdec1f827ac701',
        recommend: [{
          id: 1
        }, {
          id: 2
        }, {
          id: 3,
          class: 1,
          goodCode: 'BB6179',
          goodId: '049b05edbdf34908adf083e43b8ca7d3'
        }, {
          id: 4,
          class: 1,
          goodCode: 'CM8237',
          goodId: 'dcd3eab4a7b9443eb0ef8f40a32efdb6'
        }, {
          id: 5
        }, {
          id: 6,
          class: 1,
          goodCode: 'AQ0573',
          goodId: '05139cb318f74cef83761f4ea7744820'
        }, {
          id: 7,
          class: 1,
          goodCode: 'CG4762',
          goodId: '0313bf175d2f4af9bd98b20c1ae82d65'
        }, {
          id: 8
        }, {
          id: 9,
          class: 1,
          goodCode: 'F33881',
          goodId: 'becc82ec1b0e4d45b9c8bec46fe7fb84'
        }, {
          id: 10,
          class: 1,
          goodCode: 'BB4400',
          goodId: 'ae9813be8780438696ca70b903d980e2'
        }, {
          id: 11
        }, {
          id: 12,
          class: 1,
          goodCode: 'DB2543',
          goodId: 'd5d4f62d293b455c8c7035eeb7725e1c'
        }, {
          id: 13,
          class: 1,
          goodCode: 'B44806',
          goodId: 'ce220963317740b18f00358785f56ad5'
        }, {
          id: 14
        }, {
          id: 15,
          class: 1,
          goodCode: '805941-601',
          goodId: 'aaebd8f5c2964ff4a569e628ed604f81'
        }, {
          id: 16,
          class: 1,
          goodCode: 'AA7396-002',
          goodId: 'c9b9704042384665ad3b8c795aa46097'
        }, {
          id: 17
        }, {
          id: 18,
          class: 1,
          goodCode: '942842-102',
          goodId: '568f5d30bed146b99a006f439a9b89aa'
        }, {
          id: 19,
          class: 1,
          goodCode: '942842-004',
          goodId: 'b744d03c84da46729a48dc9c6b186902'
        }, {
          id: 20
        }, {
          id: 21,
          class: 1,
          goodCode: '942851-006',
          goodId: 'c37c3faad7284e1e89c644c25d39db84'
        }, {
          id: 22,
          class: 1,
          goodCode: '831352-601',
          goodId: '6b113ea70b17420eab382bc7473c614e'
        }, {
          id: 23
        }, {
          id: 24,
          class: 1,
          goodCode: 'AO9819-200',
          goodId: '374af175a5f245a0a31ca54463b0ec63'
        }, {
          id: 25,
          class: 1,
          goodCode: 'AO9819-001',
          goodId: 'ff2f53eb6f9b461891d9f59255894b18'
        }, {
          id: 26
        }, {
          id: 27,
          class: 1,
          goodCode: '880848-100',
          goodId: '5d38080f530f47c8a5cd3b4cffcd8ac7'
        }, {
          id: 28,
          class: 1,
          goodCode: 'AA7406-001',
          goodId: '51fc4495789b40e8a411001c85754b1f'
        }, {
          id: 29
        }, {
          id: 30,
          class: 1,
          goodCode: '724810-868',
          goodId: 'a5d1f75b3ed54773a5ac3f7cfa3723e6'
        }, {
          id: 31,
          class: 1,
          goodCode: '724810-313',
          goodId: '8802f9d0b4ec4221ae88114e12279e7d'
        }, {
          id: 32,
          class: 1,
          goodCode: '724810-418',
          goodId: '965930dc895e4a469a69beb7a0df807d'
        }, {
          id: 33,
          class: 1,
          goodCode: '805123-657',
          goodId: '4c37b88e0ccd44449ac70d22ad92499d'
        }, {
          id: 34,
          class: 1,
          goodCode: 'CF7339',
          goodId: 'ecdbd23760e143e59396dd65020994a6'
        }, {
          id: 35,
          class: 1,
          goodCode: 'S94467',
          goodId: 'a9f86d80b19d4c0893d50c24441a8e63'
        }, {
          id: 36,
          class: 1,
          goodCode: '642828-010',
          goodId: 'e2a7db5201464a5b9dd841ea66ceb0e8'
        }, {
          id: 37,
          class: 1,
          goodCode: '828168-387',
          goodId: 'cc892276271d4597a9b0e90dbe6adf97'
        }, {
          id: 38
        }, {
          id: 39
        }, {
          id: 40,
          class: 1,
          goodCode: 'BB6153',
          goodId: '6398ea0fda4c4fdaad6418216bb152c1'
        }, {
          id: 41,
          class: 1,
          goodCode: 'AQ6035',
          goodId: '97a713485e1241b39ff9af6f3eb69de0'
        }, {
          id: 42
        }, {
          id: 43,
          class: 1,
          goodCode: 'DB1299',
          goodId: '1e78db8b5e684f259f6168c33e48de5e'
        }, {
          id: 44,
          class: 1,
          goodCode: 'DB1306',
          goodId: '12522ef25dd946af9798059fbebf85a6'
        }, {
          id: 45
        }, {
          id: 46,
          class: 1,
          goodCode: '942839-101',
          goodId: 'da81bdef7b9743dcac23bcec8758674b'
        }, {
          id: 47,
          class: 1,
          goodCode: 'AA1620-100',
          goodId: '06435091a2044f8f9679d80a7cba81e7'
        }, {
          id: 48
        }, {
          id: 49,
          class: 1,
          goodCode: 'AQ0070-001',
          goodId: 'c6a4ece908134addb7c252085b3976b5'
        }, {
          id: 50,
          class: 1,
          goodCode: '897821-001',
          goodId: 'fd94cefaef6c4993958408fa4e37687e'
        }, {
          id: 51

        }, {
          id: 52,
          class: 1,
          goodCode: '829748-010',
          goodId: '5c73ef18fd034bf3aec68968a6e93e6e'
        }, {
          id: 53,
          class: 1,
          goodCode: '829748-100',
          goodId: '83dd2b10aee843e48a960c45d3fe2bad'
        }, {
          id: 54,
          class: 1,
          goodCode: '821994-480',
          goodId: '03ae6f833a854cf8bdd891f918187d8f'

        }, {
          id: 55,
          class: 1,
          goodCode: '821994-658',
          goodId: '11ef2e5085bf4b34a2b0d37afc86f31c'
        }, {
          id: 56,
          class: 1,
          goodCode: 'BK6182',
          goodId: '5072f54a87694fdcbd9499268675a0fb'
        }, {
          id: 57,
          class: 1,
          goodCode: 'DN8406',
          goodId: 'd0f4f2bbd076403bac2407ce3ef73451'
        }, {
          id: 58,
          class: 1,
          goodCode: '831801-021',
          goodId: 'b8f6f61a7cef4112ad01e9f6647809f7'
        }, {
          id: 59,
          class: 1,
          goodCode: 'AO3328',
          goodId: '052fa038e7294118a8579f0cd65190d8'
        }, {
          id: 60
        }],
        bottomStatus: '',
        bottomText: '上拉加载更多',
        selected: 'shop',
        proData: [],
        params: {
          pageIndex: 1,
          pageSize: 20
        },
        isDone: false,
        tips: false,
        activity: {
          notice: ''
        },
        showText: false,
        allLoaded: false
      }
    },
    components: {
      ServiceIcon,
      BackHead
    },
    computed: {},
    mixins: [wxShare],
    methods: {
      recommendRouter(id) {
        if (id === undefined) return
        const data = {
          goodsId: id,
          activityId: getLocalStorage('activityId'),
          bid: getLocalStorage('sharebid')
        }
        const encryptStr = encryptString(JSON.stringify(data))
        const productId = encryptStr.replace(/\+/g, '-')
        this.$router.push({
          path: '/product',
          query: {
            id: productId
          }
        })
      },
      goDetail(productId) {
        if (this.testBid !== this.params.bid && this.preSaleId === this.params.activityId) return
        this.$router.push({
          path: '/product',
          query: {
            id: productId
          }
        })
      },
      handleBottomChange(status) {
        this.bottomStatus = status
      },
      // 设置分享信息
      setShare(info) {
        const shareInfo = {
          title: info.labelName,
          desc: info.activeDoc,
          link: window.location.href,
          img: info.labelLogo
        }
        // mixins
        this.wechatShare(shareInfo)
      },
      loadBottom() {
        // 底部加载更多
        this.$refs.loadmore.onBottomLoaded()
        this.bottomText = ''
        this.fetchData()
      },
      loadTop() {
        // 下拉刷新
        this.loadDone = false
        this.proData = []
        this.$refs.loadmore.onTopLoaded()
        this.params.pageIndex = 1
        this.fetchData()
      },
      fetchData(first) {
        // for (let i = 0; i < 60; i++) {
        //   this.recommend.push({
        //     id: i + 1
        //   })
        // }
        // console.log(JSON.stringify(this.recommend))
        const params = {
          pageIndex: this.params.pageIndex,
          pageSize: this.params.pageSize,
          activityId: this.params.activityId
        }
        getProductList(params).then(res => {
          this.activity = res.data.activity
          const list = res.data.findGoodsList
          // 如果有新品和旧款分类插入banner
          list.forEach((item, index) => {
            // 先判断index>0 后判断index-1
            if (item.isNew === 0 && index > 0 && list[index - 1].isNew === 1) {
              list.splice(index, 0, {
                'banner': true
              })
            }
          })
          this.proData = this.proData.concat(list)
          this.allLoaded = !res.data.hasNext
          this.bottomText = this.allLoaded === true ? '没有更多了' : '上拉加载更多...'
          this.params.pageIndex += 1
          if (this.proData.length > 0) {
            this.proData.map(item => {
              // 如果没有插入banner图
              if (!item.banner) {
                const data = {
                  goodsId: item.goodsId,
                  activityId: item.activityId,
                  bid: this.params.bid
                }
                // 加密
                const encryptStr = encryptString(JSON.stringify(data))
                item.productId = encryptStr.replace(/\+/g, '-')
              }
            })
          } else {
            this.isDone = true
          }
          this.setShare(this.activity)
        }).catch(err => {
          console.log(err)
        })
      }
    },
    activated() {
      // 修复keepalive tab不更新
      if (this.$route.name === 'shop') {
        this.selected = 'shop'
      }
    },

    mounted() {
      // this.tips = true
      this.ActiveNo = this.$route.query.id
      if (this.ActiveNo) {
        // 替换所有的'-'
        const decryptStringStr = this.ActiveNo.replace(/\-/g, '+')
        // 解密
        const parseStr = decryptString(decryptStringStr)
        const queryParams = JSON.parse(decodeURIComponent(parseStr))
        // 活动
        this.params.activityId = queryParams.activityId
        this.params.bid = queryParams.bid
        setLocalStorage('activityId', queryParams.activityId)
        setLocalStorage('sharebid', queryParams.bid)
      } else {
        this.params.activityId = getLocalStorage('activityId')
        this.params.bid = getLocalStorage('sharebid')
      }

      this.fetchData(true)
    }
  }

</script>
<style lang="scss" scoped>
  @import '~assets/common/css/mixin.scss';
  .loadmoreText {
    /* background: #f0f3f5; */
    // display: flex;
    // -webkit-display: flex;
    // flex: 1;
    // justify-content: center;
    // align-items: center;
    @include flexbox(center,
    center,
    row,
    nowrap);
    font-size: 12px;
    background: transparent;
    padding: 10px 0;
    >span {
      padding-left: 10px;
    }
  }

  .product-container {
    // height: 100%;
    .content {
      /* 商品列表 */
      .recommend {
        font-size: 0px;
        div {
          font-size: 0px;
        }
        .two-item {
          width: 50%; // display: inline-block; 
          float: left;
        }
        img {
          display: block;
          width: 100%
        }
      }
      .tips {
        padding: 10px;
        background: #FFFEEB;
        color: #000;
        position: relative;
        .icon {
          width: 20px;
          height: 20px;
          display: inline-block;
          background: url('~assets/common/images/laba.png') no-repeat center center;
          background-size: 100% 100%;
          position: absolute;
        }
        p {
          line-height: 20px;
          padding-left: 25px;
          display: inline-block;
        }
      }
      .loadmore-warp {
        padding-top: 1.25rem;
        padding-bottom: 2.25rem;
        height: 100vh;
        overflow: scroll;
        -webkit-overflow-scrolling: touch;
        .product-list {
          background: #fff;
          padding-right: 10px;
          @include flexbox(space-between,
          center,
          row,
          wrap);
          overflow: hidden;
          clear: both;
          .product-item {
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            flex: 0 0 50%;
            -webkit-flex: 0 0 50%;
            .item-posre {
              position: relative;
              text-align: center;
              img {
                max-height: 185px;
                max-width: 100%;
              } // &:after {
              //    display: block;
              //    position: absolute;
              //    content: '';
              //    width: 100%;
              //    height: 23px;
              //    bottom: 0;
              //    background-color: #333333;
              //    opacity: 0.5;
              // }
              // &:before {
              //    display: block;
              //    position: absolute;
              //    content: '失效';
              //    width: 100%;
              //    bottom: 0;
              //    z-index: 100;
              //    color:#ffffff;
              //    line-height: 23px;
              // }
            }
            .item-product-text {
              margin: .1rem 0 0 .1rem;
              font-size: 14px;
              line-height: 20px;
              height: 40px; // overflow: hidden;
              // display: -webkit-box;
              // -webkit-line-clamp: 2;
              // -webkit-box-orient: vertical; 
              // overflow: hidden;
              // text-overflow: ellipsis;
              // display: -webkit-box;
              // -webkit-box-orient:vertical;
              // -webkit-box-orient: vertical;
              // -webkit-line-clamp: 2; 
              @include textoverflow(2);
            }
            .size {
              white-space: normal;
              word-break: break-all;
              @include textoverflow(1);
            }
            .item-product-info {
              @include flexbox(space-between,
              center,
              row,
              wrap);
              color: #f23030;
              padding: 0 0 .2rem .1rem;
              font-size: 16px;
              span {
                i {
                  font-size: 12px;
                  margin-right: .1rem;
                }
              }
              .jx-btn {
                color: #ffffff;
                font-size: 13px;
                background: #f23030;
                border: 1px solid #f23030!important;
                padding: 0.1rem 0.2rem;
                @include radius(3px)
              }
              .none {
                background: #ddd;
                border: 1px solid #999!important;
              }
            }
            .original-price {
              i {
                text-decoration: line-through;
              }
              padding: .2rem .1rem .1rem .1rem;
              font-size: 12px;
              color: #999;
            }
          }
        }
        .cart-tips {
          margin-top: 40px;
          position: relative;
          z-index: 1;
          padding: $padding 25px;
          @include flexbox(flex-start,
          center,
          column,
          nowrap);
          p {
            font-size: 14px;
            color: #999;
            line-height: 2;
          }
        }
      }

      /* 商品列表 */
    }
  }

</style>
